import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { applyTheme } from './theme'
import './index.css'
import App from './App.tsx'
import { setupMockStreamResponse } from './mockApi'

// 创建QueryClient实例
// 配置：关闭窗口焦点时自动重新获取，重试次数设为1
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false, // 禁用窗口获得焦点时的自动重新获取
      retry: 1                     // 请求失败时只重试一次
    },
  },
});

// 初始化主题（会在ThemeProvider中再次应用）
// 优先使用本地存储的主题设置，如果没有则根据系统偏好设置
applyTheme(localStorage.getItem('theme') as 'light' | 'dark' || 
  (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));

// 设置API模拟（仅在没有API密钥时启用）
// 当环境变量中未配置DeepSeek API密钥时，启用模拟响应功能
if (!import.meta.env.VITE_DEEPSEEK_API_KEY) {
  console.log('未检测到DeepSeek API密钥，启用模拟响应');
  setupMockStreamResponse();
}

// 创建React根元素并渲染应用
// 使用StrictMode进行严格检查
// 使用QueryClientProvider提供查询客户端
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>,
)
